<template>
    <div class="form">
        <div class="inp">
            用户名:<input v-model="inp" /><br>
            密码:<input v-model="psw"  /> <br>
            角色:<select v-model="sel">
                <option>男</option>
                <option>女</option>
            </select> <br>
            邮箱:<input v-model="email" /> <br>
            验证码:<input v-model="code"/> <br>
            <button @click="obtainCode">获取验证码</button>
            <button @click="submitTo">提交</button>
        </div>
    </div>
</template>

<script setup>
import { getCode, addUser } from '../api/index';
import { ref } from 'vue';
const email = ref('');
const inp = ref('');
const psw = ref('');
const sel = ref('女');
const code = ref('');
const obtainCode = () => {
    getCode({
        email: email.value
    }).then(res => {
        console.log(res);
    })
}

const submitTo = () => {
    addUser({
        username: inp.value,
        password: psw.value,
        role: sel.value,
        email: email.value,
        code:code.value
    })
}
</script>

<style scoped>
.form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.inp {
    display: flex;
    flex-direction: column
}
</style>